<template>
  <div class="container" style="width: 1000px">
    <el-card class="box-card" style="heigth: 50px">
      <el-page-header @back="cancel" content="详情页面"> </el-page-header>
    </el-card>
    <br />
    <el-form>
      <el-card class="box-card">
        <el-row type="flex" class="row-bg">
          <el-col>
            <el-form-item>
              <img
                :src="this.form.articleSurface"
                alt=""
                style="width: 450px; heigth: 250px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item>
              <h1>{{ articleTitle }}</h1>
            </el-form-item>

            <el-form-item label="作者：">
              {{ articleAuthor }}
            </el-form-item>

            <el-form-item label="简介：">
              {{ articleExplain }}
            </el-form-item>

            <!-- <el-form-item label="类型："> -->
            <!-- {{ form.articleType }} -->
            <!-- </el-form-item> -->
          </el-col>
        </el-row>
      </el-card>

      <el-card>
        <el-form-item>
          <!-- 文章内容 -->
          <mavon-editor
            v-model="form.mdContent"
            :subfield="prop.subfield"
            :defaultOpen="prop.defaultOpen"
            :toolbarsFlag="prop.toolbarsFlag"
            :editable="prop.editable"
            :scrollStyle="prop.scrollStyle"
            :boxShadow="prop.boxShadow"
            ref="md"
          />
        </el-form-item>

        <div class="detail-content-line">
          <!-- 浏览次数 -->
          <span style="float: left; color: #6b6b6b">
            浏览 {{ sumRead }} 次</span
          >
          <p class="op-list">
            <!-- 点赞图标 -->
            <a class="dzdz" @click="like">
              <i class="iconfont icon-dianzan1" v-if="isClick == 0"></i>
              <i
                class="iconfont icon-dianzan1"
                style="color: rgb(33, 108, 194)"
                v-if="isClick == 1"
              ></i>
            </a>
            <a><i class="iconfont icon-pinglun" @click="focusfns"></i></a>
          </p>
          <hr />
          <!-- <div class="d-one" style=""> -->
          <a style="width: 20px; height: 20px"
            ><i
              class="iconfont icon-dianzan1"
              style="font-size: 13px; margin-bottom: 7px; margin-left: 2px"
            >
              {{ sumPraises }}人觉得很赞</i
            ></a
          >

          <!-- </div> -->
          <!-- 评论的用户和内容 -->
          <div
            class="d-two"
            style="margin-bottom: 10px; margin-left: 4px; margin-top: 5px"
          >
            <p
              style="font-size: 13px; margin-bottom: 5px"
              v-for="item in allCom"
              :key="item.id"
            >
              {{ item.newUsername }}：{{ item.comConent }}
              <!-- </p> -->
            </p>
          </div>

          <!-- 评论input -->

          <div class="comment-box">
            <i v-if="isInput == 0" class="i-text">
              <el-input
                @focus="focusfns"
                type="text"
                placeholder="请输入内容"
                v-model="textarea.comment"
                maxlength="100"
                show-word-limit
              >
              </el-input>
              <br />
              <p></p>

              <el-button
                type="primary"
                icon="el-icon-edit"
                style="margin-left: 90%; padding-top: 10px; margin-top: 5px"
                @click="putText"
                >发表</el-button
              >
            </i>
            <i v-if="isInput == 1" class="i-textarea">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="textarea.comment"
                maxlength="100"
                show-word-limit
                resize="none"
                autofocus
                ref="gain"
                @focus="fuInput"
                @blur="lostInput1"
              >
              </el-input>
              <br />
              <p></p>

              <el-button
                type="primary"
                icon="el-icon-edit"
                style="margin-left: 90%; padding-top: 10px; margin-top: 5px"
                >发表</el-button
              >
            </i>
          </div>
        </div>

        <!-- ----------------------- -->
      </el-card>
    </el-form>
  </div>
</template>

<script>
// import { getArticleDetail } from "../api/article";
import { getArticleInfo, putCom, getAllCom } from "../api/article";
import { addPraise, deletePraise, selectPraise } from "../api/praise";
import { addSumCom } from "../api/read";
import common from "../uitls/common";

export default {
  data() {
    return {
      localhostPath: common.localhostPath,
      form: {
        mdContent: "", // 输入的markdown
        articleSurface: "",
      },
      //文章简介
      articleExplain: "",
      //文章作者
      articleAuthor: "",
      //文章内容
      articleContent: "",
      //文章标题
      articleTitle: "",
      //阅读量
      sumRead: "",
      autofocus: false,
      readDatas: {
        userId: "",
      },
      // text: "",跟评论有关
      allCom: [],
      textarea: {
        userId: 0,
        articleId: 0,
        comment: "",
      },
      userAndArticle: {
        userId: 0,
        articleId: 0,
      },
      isInput: "",
      content: "",
      // -----------
      //跟点赞有关
      clickNum: 12,
      //点赞总数
      sumPraises: "",
      isClick: "",
      count: 0,
      // -----------
    };
  },

  mounted() {
    // this.getDetail();
    this.getArtInfoInFo();
    this.byArticleIdgetCom();
    this.IsPraise();
    this.addComCount();
  },
  computed: {
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: false,
        boxShadow: false, //边框
      };
      return data;
    },
  },
  methods: {
    //点击增加阅读量
    addComCount() {
      console.log("aaaaaaaaaaaaaaaaa");
      var uId = Number(localStorage.getItem("userId"));
      if (uId == 0) {
        console.log(uId);
      } else {
        console.log(localStorage.getItem("userId"));
        var artId = Number(this.$route.params.id);
        console.log(artId);
        this.readDatas.userId = uId;
        console.log(this.readDatas);
        addSumCom(artId, this.readDatas)
          .then(({ data }) => {
            console.log(data.data);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    cancel() {
      this.$router.go(-1);
    },
    // 判断这个用户Id和此文章Id是否在点赞表中
    IsPraise() {
      //文章Id转换成Number类型
      var id = Number(this.$route.params.id);
      console.log(id);
      this.userAndArticle.articleId = id;
      //用户Id转换成Number类型
      var uId = Number(localStorage.getItem("userId"));
      if (uId == 0) {
        console.log(this.isClick);
      } else {
        this.userAndArticle.userId = uId;
        console.log(uId);
        selectPraise(this.userAndArticle)
          .then(({ data }) => {
            console.log(data.data);
            if (data.data != null) {
              this.isClick = 1;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    //将评论内容传入数据库
    putText() {
      //用户Id转换成Number类型
      var uId = Number(localStorage.getItem("userId"));
      console.log(uId);
      if (uId == 0) {
        alert("您还未登录，请先登录！");
        // this.$message({ type: "warning", showClose:true, message: "您还未登录，请先登录!" });
        this.$router.push("/");
      } else {
        (this.textarea.userId = uId), console.log(this.textarea);
        putCom(this.textarea)
          .then(({ data }) => {
            this.textarea.comment = "";
            console.log(data.data);
            let arr = data.data;
            this.allCom.push(arr[0]);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 通过文章Id查找所有评论
    byArticleIdgetCom() {
      getAllCom(this.$route.params.id)
        .then(({ data }) => {
          console.log(this.textarea.articleId);
          console.log(data.data);
          this.allCom = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //单击事件-点赞效果
    like() {
      var uId = Number(localStorage.getItem("userId"));
      if (uId == 0) {
        alert("您还未登录，请先登录！");
        // this.$message({ type: "warning", showClose:true, message: "您还未登录，请先登录!" });
        this.$router.push("/");
      } else {
        this.textarea.userId = uId;
        //如果未点赞
        if (this.isClick == 0) {
          this.isClick = 1;
          this.sumPraises = this.sumPraises + 1;
          //进行点赞操作
          //用户Id转换成Number类型

          addPraise(this.textarea)
            .then(({ data }) => {
              console.log(data.data);
            })
            .catch((err) => {
              console.log(err);
            });
          console.log(this.sumPraises);
        } else {
          //已经点赞
          this.isClick = 0;
          this.sumPraises = this.sumPraises - 1;
          //进行取消点赞
          //用户Id转换成Number类型
          // var uId = Number(localStorage.getItem("userId"));
          // (this.textarea.userId = uId),
          deletePraise(this.textarea)
            .then(({ data }) => {
              console.log(data.data);
            })
            .catch((err) => {
              console.log(err);
            });
        }

        console.log(this.sumPraises);
      }
    },
    //通过Id获取文章信息
    getArtInfoInFo() {
      getArticleInfo(this.$route.params.id)
        .then(({ data }) => {
          console.log(data.data.id);
          //作者
          this.articleAuthor = data.data.articleAuthor;
          //存入文章id
          this.textarea.articleId = data.data.id;
          //简介
          this.articleExplain = data.data.articleExplain;
          //文章内容
          this.form.mdContent = data.data.mdContent;
          //阅读量
          this.sumRead = data.data.sumRead;
          //点赞总数
          this.sumPraises = data.data.sumPraises;
          //
          this.articleTitle = data.data.articleTitle;
          //文章封面
          if (data.data.articleSurface == null) {
            this.form.articleSurface = require("../YYB/img/2333296zENB.jpg");
          } else {
            this.form.articleSurface =
              this.localhostPath + data.data.articleSurface;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 评论输入框
    fuInput() {
      if (this.autofocus == true) {
        this.autofocus = false;
        // console.log("第二个框获取光标：如果autofocus为TRUE");
      } else {
        console.log("第二个框获取光标：如果autofocus为False");
      }
    },
    //第一个框获取光标
    focusfns() {
      if (this.isInput == 0) {
        this.isInput = 1;
        this.autofocus = true;
        this.$nextTick(() => {
          this.$refs.gain.focus();
        }, 100);
        console.log(this.autofocus);
        // console.log("第一个框获取光标：autofocus为True");
      } else {
        // this.isInput = 0;
        console.log(this.isInput);
      }
    },
    //第二个框失去光标
    lostInput1() {
      if (this.autofocus == false) {
        this.isInput = 0;
        // console.log("第二个框失去光标：autofocus为False");
      }
    },
  },
};
</script>

<style scoped>
.iconfont {
  cursor: pointer;
}
.container {
  word-wrap: break-word;
  word-break: break-all;
  margin: auto;
}
.el-form-item {
  margin: 0;
}
.detail-content-line {
  padding-top: 7px;
  padding-left: 20px;
  /* width: 700px; */
}
.op-list {
  float: right;
  padding-right: 10px;
  padding-bottom: 3px;
}
.op-list i {
  font-size: 25px;
  margin-right: 25px;
}
.iconfont {
  font-size: 2.5rem;
  color: #8a8a8a;
}
.iconfont:hover {
  color: rgb(33, 108, 194);
}

/* 评论框 */
.comment-box {
  /* width: 690px; */
  /* height: 45px; */
  border-width: 1px;
  /* border-style: solid; */
  /* margin-right: 10px; */
  text-align: start;
}
</style>